A sleek advice generator built for a Frontend Mentor challenge, powered by the Advice Slip API. It fetches random advice and displays it with smooth transitions, responsive layout, and interactive dice-triggered updates. Styled with Manrope font, neon hover effects, and semantic HTML, the app delivers a clean, accessible experience across devices.
Create a responsive advice generator that fetches live data from the Advice Slip API. The app needed to deliver a smooth, interactive experience with animated transitions, semantic structure, and accessibility across devices.
Ensuring consistent API responses, handling edge cases in advice rendering, and styling the layout to match the design spec while maintaining responsiveness. Creating a glowing hover effect and positioning the dice button for mobile and desktop views also required precision.
Used semantic HTML5 and custom CSS with root variables for styling. Integrated the Advice Slip API using JavaScript fetch logic and dynamic DOM updates. Applied responsive design principles and media queries to adapt layout across screen sizes. Added hover animations and accessibility enhancements for keyboard users.
This project was completed independently as part of a Frontend Mentor challenge.
If this project resonates with your goals, let's collaborate. Reach out for tailored solutions, consultations, or a custom quote.